<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Window对象</title>
	<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<dl id="drink-menu" style="border:solid 1px green;padding: 6px">
	<dt>摩卡</dt>
	<dt>热摩卡咖啡</dt>
	<dt>酸奶</dt>
	<dt>北京老酸奶</dt>
	<dt>果汁</dt>
	<dt>鲜榨果汁</dt>
</dl>
<script>
	//window不仅充当全局作用域，还表示浏览器窗口
	console.log("window inner size:" + window.innerHeight + "X" + window.innerWidth);

	//naviator 表示浏览器的信息
	//浏览器名称
	console.log("appName = " + navigator.appName);
	//浏览器版本
	console.log("appVersion = " + navigator.appVersion);
	//浏览器设置的语言
	console.log("language = " + navigator.language);
	//操作系统类型
	console.log("platform = " + navigator.platform);
	//浏览器设定的User-Agent标识符
	console.log("userAgent = " + navigator.userAgent);

	//screen对象表示屏幕信息
	//屏幕的宽度,以像素为单位
	console.log("screen.width:" + screen.width);
	//屏幕的高度
	console.log("screen.height:" + screen.height);
	//返回颜色的位数
	console.log("screen.colorDepth:" + screen.colorDepth);

	//location 表示页面的URL的信息
	//http://www.example.com:8080/path/index.html?a=1&b=2#TOP
	//href
	console.log("location.href:" + location.href);
	//协议
	console.log("location.protocol:" + location.protocol );
	//主机名
	console.log("location.host:" + location.host);
	//端口号
	console.log("location.port:" + location.port);
	//路径
	console.log("location.pathname:" + location.pathname);
	//参数
	console.log("location.search:" + location.search);
	//hash
	console.log("location.hash:" + location.hash);

	//location.assign() 可以重新加载当前页面
	//location.reload() 可以用于加载指定页面

	`use strict`
	let showPage = function (url) {
		url = url || "https://www.baidu.com";
		if (confirm("重新加载当前页面" + location.href + "?")) {
			location.reload();
		} else {
			location.assign(url);
		}
	};
	//showPage();

	//document对象表示当前页面,由于HTML在浏览器中以DOM表示树形结构,document表示整个DOM树的根节点
	//document DOM树的title属性
	console.log("document.title:" + document.title);

	let menu = document.getElementById("drink-menu");
	let drinks = document.getElementsByTagName("dt");
	let s = "提供的饮料有:";
	for (i = 0; i < drinks.length; i++) {
		s += drinks[i].innerHTML + ",";
	}
	console.log(s);

	//document还有cookie属性，获取当前页面的cookie
	console.log("document.cookie:" + document.cookie);
	//由于html可以引入第三方的JavaScript,并且可以通过JavaScript读取cookie信息
	//所以为了安全,一般在服务端设置cookie的时候，应当使用httpOnly

	//history对象保存了浏览器的历史纪录，javaScritp可以调用history对象的back()
	//forward()，来实现浏览器的前进和后退

</script>
</body>
</html>